<template>
    <div class="invitation">
        <!-- 登记管理 -->
        <div class="container">
            <div>
                <el-form ref="form" :model="from">
                    <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item label="姓名:" label-width="90px">
                            <el-input v-model="from.userName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                   <!-- <el-col :span="5">
                        <el-form-item label="部门:" label-width="90px">
                          <el-select v-model="value" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="5">
                        <el-form-item label="时间:" label-width="100px">
                             <el-date-picker
                                v-model="time"
                                type="daterange"
                                 value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                 :default-time="['00:00:00', '23:59:59']"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    </el-row>
                </el-form>
                <el-row :gutter="20">
                    <el-col :span="5" :offset="18">
                        <div style="padding-bottom: 20px;">
                            <el-button type="primary"  @click="search">搜索</el-button>
                            <el-button type="primary" @click="reset">重置</el-button>
                            <!-- <el-button type="primary" plain @click="Export">导出</el-button> -->
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-table
                ref="multipleTable"
                :data="tableData"
                v-loading="loading"
                border
                class="table"
                show-overflow-tooltip
            >
                <!-- <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column> -->
                <el-table-column prop="userName" label="姓名" fixed align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="deviceName" label="洞口" fixed align="center" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column  label="工单状态" fixed align="center" show-overflow-tooltip>
                     <template slot-scope="scope">
                        <span  v-if=" scope.row.orderStatus == '1'">未完成</span>
                        <span  v-if=" scope.row.orderStatus == '2'">已完成</span>
                        <span style="color:red"  v-if=" scope.row.orderStatus == '3'">已作废</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="jobnumber" label="工号" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="position" label="职位" align="center" show-overflow-tooltip></el-table-column> -->
                <el-table-column prop="deptName" label="部门" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="mdDate" label="日期" align="center" width="170"  > </el-table-column>
                <el-table-column prop="mdTime" label="时间" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="areaType" label="管理单位" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="type" label="识别类型" align="center" show-overflow-tooltip></el-table-column>
            </el-table>
            <div class="pagination">
                <pagination :query="query" @getData="getData" :total="total" />
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import moment from "moment"
import { findDetailsByData } from '../../api/index';
import Pagination from '@/components/Pagination';
import OSnow from '@/utils/isOS';
export default {
    name: 'invitation',
    components: { Pagination },
    data() {
        return {
        loading:false,
        from: {
            userName:'',//姓名
            startDate:'',//开始时间
            endDate:'',//结束时间
            areaName:'',
            areaType:''

        },
        query: {
            limit: 10,
            offset: 1,
        },
        total:0,
        time:'',
        year:'',
        tableData: [],
        multipleSelection: [],
        tagId:[],
        dialogFormVisible:false,

    };
},
    created() {
        // this.from.endDate = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
        // const now = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
        // this.from.startDate = moment(now).startOf("month").format("YYYY-MM-DD HH:mm:ss");

        this.from.endDate = this.$route.query.endDate
        this.from.startDate = this.$route.query.startDate
        this.from.areaName = this.$route.query.areaName
        this.from.areaType = this.$route.query.areaType
        console.log('this.from: ', this.from);
        this.getData()

    },
    methods: {

        search(){
            this.query.offset = 1
            this.from.startDate = this.time[0]
            this.from.endDate = this.time[1]
            console.log(this.from);
            this.getData()
            // location.href='dingtalk://dingtalkclient/page/link?url=https%3A%2F%2Faflow.dingtalk.com%2Fdingtalk%2Fpc%2Fquery%2Fpchomepage.htm%3Fcorpid%3Ddingcbcbb63d3edd5478%26type%3D2%26ddtab%3Dtrue'
        },
        // 获取 列表数据
        getData() {
            console.log(this.time);
            const data = { ...this.query, ...this.from };
            findDetailsByData(data)
                .then(res => {
                    if (res.data.status == 100) {
                        this.loading = false
                        res.data.data.list.map(item=>{
                            item.deptName = item.deptName.replace(/\[|]/g,'')
                            item.label = '成员'
                            item.type = '人脸'
                        })
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.errMsg);
                    }
                })
                .catch(err => {
                  console.log(err)
                });
        },
        Export() {
        const data = { ...this.from };
        var axiosOption={
            method:'post',
            url: 'http://101.34.91.118:8999/api/attendance/export',
            data: data,
            timeout: 0,
            responseType:'arraybuffer',
            headers: {'Content-Type': 'application/json'}
        }
        axios(axiosOption).then(res=>{
            let newblob = new Blob([res.data]);
            let a = document.createElement("a");
            a.download = "考勤数据.xls";
            // a.href = unescape(URL.createObjectURL(newblob));
            a.href = window.URL.createObjectURL(newblob);
            // alert(a.href);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        })

    },

    //重置
    reset() {
        this.from.userName =''
        this.time =''
        this.from.endDate = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
        const now = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
        this.from.startDate = moment(now).startOf("month").format('YYYY-MM-DD HH:mm:ss');
        this.getData();
    }
}
};
</script>

<style scoped>
.handle-box {
    margin-top: 20px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-dialog_body{
    padding: 10px 20px;

}
</style>
